<template>
  <v-container id="data-tables" tag="section">
    <base-material-card color="indigo" icon="mdi-text" inline class="px-5 py-3">
      <template v-slot:after-heading>
        <div class="display-2 font-weight-light">
          部门信息
        </div>
      </template>
      <v-card-title>
        <v-btn raised color="light-blue lighten-1" @click="handleAdd">新增部门</v-btn>
        <v-spacer></v-spacer>
        <v-text-field
            v-model="search"
            append-icon="mdi-magnify"
            class="ml-auto"
            label="查询"
            hide-details
            single-line
            style="max-width: 250px;"
        />
      </v-card-title>
      <v-divider class="mt-3" />

      <v-data-table :headers="headers" :items="deptList"
                    :loading="loading"
                    loading-text="数据加载中... 请稍等"
                    :search="search" :must-sort="true" :footer-props="this.dataTableFooterProps">>
        <template v-slot:item.option="{ item }">
          <v-btn class="px-1 ml-1" color="success" dark small @click="handleEdit(item.deptId)">编辑
            <v-icon dark right>mdi-pencil</v-icon>
          </v-btn>
          <v-btn class="px-1 ml-1" color="error" dark small @click="handleDelete(item.deptId)">删除
            <v-icon dark right>mdi-close</v-icon>
          </v-btn>
        </template>
      </v-data-table>
    </base-material-card>

    <v-row justify="center">
      <v-dialog v-model="dialog" persistent max-width="600px" @keydown.esc="dialog = false">
        <v-card>
          <v-card-title>
            <span class="headline" >{{ dialogTitle }}</span>
          </v-card-title>
          <v-card-text>
            <v-container>
              <v-form ref="form" lazy-validation>
                <v-text-field label="部门名称*" :rules="formRules.nameRules" counter="10" maxlength="10" v-model="form.deptName"></v-text-field>
                <v-text-field label="部门排序" :rules="formRules.sortRules" type="number" v-model="form.sort"></v-text-field>
                <v-text-field label="负责人" :rules="formRules.userRules" counter="10" maxlength="10" v-model="form.leader"></v-text-field>
                <v-text-field label="联系电话" :rules="formRules.phoneRules" v-model="form.phone"></v-text-field>
              </v-form>
            </v-container>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="blue darken-1" text @click="cancel">
              关闭
            </v-btn>
            <v-btn color="blue darken-1" text @click="handleSave">
              保存
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-row>
  </v-container>
</template>

<script>
import { listDept, addDept, updateDept, deleteDept, getDeptInfo } from "@/api/system/dept";
export default {
  name: "Index.vue",
  data() {
    return {
      loading: true,
      valid: true,
      search: '',
      headers: [
        {text: '部门名称', value: 'deptName', sortable: false},
        {text: '负责人', value: 'leader', sortable: false},
        {text: '联系电话', value: 'phone', sortable: false},
        {text: '创建时间', value: 'createTime', sortable: true, filterable: false},
        {text: '排序', value: 'sort', sortable: true, filterable: false},
        {text: '操作', value: 'option',sortable: false, align: 'end', filterable: false}
      ],
      formRules: {
        nameRules: [
          v => !!v || '请填写部门名称',
          v => (v && v.length <= 10) || '长度不能超过10',
        ],
        sortRules: [
          v => (!v || (v && v >= 0)) || '不能小于0',
        ],
        userRules: [
          v => (!v || (v && v.length <= 5)) || '长度不能超过5',
        ],
        phoneRules: [
          v => {
            const pattern = /^[1]([3-9])[0-9]{9}$/;
            return (!v || (v && pattern.test(v))) || '请输入正常的手机号'
          }
        ],
      },
      queryParams: {
        deptName: undefined
      },
      deptList: [],
      dialog: false,
      form: {
        deptName: '',
        sort: '',
        leader: '',
        phone: ''
      },
      dialogTitle: ''
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      listDept(this.queryParams).then(response => {
        this.loading = false;
        let data =  response.data;
        this.deptList = data;
      });
    },
    handleAdd() {
      this.dialogTitle = "添加部门";
      this.dialog = true;
    },
    handleEdit(deptId) {
      getDeptInfo(deptId).then(res => {
        this.form = res.data;
        this.dialog = true;
        this.dialogTitle = "修改部门";
      })
    },
    handleDelete(deptId) {
      this.$dialog.warning({
        text: '确认执行此操作?',
        title: '提示',
        actions: [{
          text: '取消', key: "false", color: 'blue'
        }, {
          text: '确定', key: "true", color: 'blue'
        }],
        icon: false,
        showClose: false,
        waitForResult: true,
        color: 'grey lighten-4'
      }).then(res => {
        if(res) {
          return deleteDept(deptId).then(() => {
            this.getList();
            this.$dialog.message.success('删除成功', {
              position: 'top',
              timeout: 1500,
              color: 'green lighten-2'
            })
          });
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        deptId: undefined,
        deptName: '',
        sort: '',
        leader: '',
        phone: ''
      };
    },
    // 取消按钮
    cancel() {
      this.dialog = false;
      this.$refs.form.resetValidation()
    },
    handleSave() {
      if(this.$refs.form.validate()) {
        if(this.form.deptId) {
          updateDept(this.form).then(res => {
            if(res.code == 200) {
              this.successMsg(res.msg);
            } else {
              this.errorMsg(res.msg)
            }
            this.dialog = false;
            this.getList()
          }).then(res => {
            this.reset();
          }).catch(res => {

          });
        } else {
          addDept(this.form).then(() => {
            this.successMsg("新增成功");
            this.dialog = false;
            this.$refs.form.resetValidation()
            this.getList();
          }).then(res => {
            this.reset();
          }).catch(res => {

          });
        }
      }
    }
  }
}
</script>

<style scoped>

</style>
